<template>
	<view class="CourseDetail">

		<cu-form ref="BJForm">
			<view class="form-group">
				<cu-input required name="COURSENAME" title="专业班名称" placeholder="请输入专业班名称" />
			</view>

			<view class="form-group">
				<cu-input required name="COURSENO"  title="专业班编号" placeholder="请输入专业班编号" />
			</view>

			<view class="form-group">
				<cu-picker required name="MAJOR_ID" title="专业" :options="majorOpts" />
			</view>

			<view class="form-group">
				<cu-picker required name="TEACHER_ID" title="任课老师姓名" @change="getTEACHERValue" :options="teacherList" />
			</view>

			<view class="form-group">
				<cu-picker required name="CLASSLEADER_ID" title="班主任姓名" @change="getCLASSLEADERValue"
					:options="teacherList" />
			</view>

			<view class="form-group">
				<cu-radio name="STATE" title="是否启用" :options="statusOpts" />
			</view>
		</cu-form>


		<view class="padding">
			<button @tap="submitinfo" class="cu-btn bg-blue block lg round shadow margin-top-lg">保存提交</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import CuInput from '../../components/cu-input/index.vue'
	import CuRadio from '../../components/cu-radio/index.vue'
	import CuPicker from '../../components/cu-picker/index.vue'
	import CuForm from '../../components/cu-form/index.vue'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		nextTick,
		ref
	} from "vue";
	import {
		FetchRDCourseListDAT
	} from "../../types/responseTypes";
	import {
		useMajorList
	} from "../profile/useMajorList";
	import {
		useRDCourseDetail
	} from "./useRDCourseDetail";
	import {
		doModifyRDCourseInfo
	} from "../../api/classes";
	import {
		useStore
	} from "vuex";
	const {
		courseDetail,
		initRDCourseDetail,
		initgetteacherList,
		teacherList
	}: any = useRDCourseDetail()
	const BJForm = ref < any > (null)
	const COURSE_ID = ref('')
	const TEACHER_NAME = ref < any > ('')
	const CLASSLEADER = ref < any > ('')
	function submitinfo(){  //验证专业编号是否为字母与数字组合
		(BJForm.value.submit() as Promise < any > )
		.then(async values=>{
			const {COURSENO} = values
			let rule = /^[A-Za-z0-9]+$/
			if(rule.test(COURSENO)){
				modifyCourseInfo()
			}else{
				uni.showToast({
					title: '专业编号只能是字母与数字组合',
					icon: 'none',
					mask: true
				})
			}
		})
	}
	function getTEACHERValue(e) {
		teacherList.value.forEach(v => {
			if (v.value === e) {
				TEACHER_NAME.value = v.label
			}
		})
	}

	function getCLASSLEADERValue(e) {
		teacherList.value.forEach(v => {
			if (v.value === e) {
				CLASSLEADER.value = v.label
			}
		})
	}
	onLoad(async (options: any) => {
		initgetteacherList()
		if (options.COURSE_ID) {
			COURSE_ID.value = options.COURSE_ID
			if (COURSE_ID.value != '0') {
				await initRDCourseDetail(COURSE_ID.value)
				nextTick(() => {
					BJForm.value.setFields(['COURSENAME', 'MAJOR_ID', 'TEACHER_ID', 'CLASSLEADER_ID',
						'COURSENO', 'STATE'
					].map(name => ({
						name,
						value: courseDetail.value[name as keyof FetchRDCourseListDAT] +
							''
					})))
				})
			}
			TEACHER_NAME.value = courseDetail.value.TEACHER_NAME
			nextTick(() => {
				BJForm.value.setFields([{
					name: 'STATE',
					value: courseDetail.value.STATE || statusOpts[0].value
				}])
			})
		} else {
			uni.showToast({
				title: '传参异常',
				icon: 'error',
				mask: true
			})

			setTimeout(() => {
				uni.navigateBack()
			}, 500)
		}
	})

	const {
		majorOpts
	} = useMajorList()

	const statusOpts = [{
			value: '1',
			label: '启用'
		},
		{
			value: '0',
			label: '停用'
		}
	]


	const {
		state
	} = useStore()

	function modifyCourseInfo() {
		(BJForm.value.submit() as Promise < any > ).then(async values => {
			const {
				COURSENAME,
				MAJOR_ID,
				TEACHER_ID,
				CLASSLEADER_ID,
				COURSENO,
				STATE
			} = values
			try {
				const res = await doModifyRDCourseInfo({
					COURSE_ID: COURSE_ID.value,
					COURSENAME,
					MAJOR_ID,
					TEACHER_NAME: TEACHER_NAME.value,
					TEACHER_ID,
					CLASSLEADER_ID,
					STATE,
					COURSENO,
					OPERATOR_ID: state.user.userInfo.CUSER_ID
				})
				if (res.ERROR[0].errcode == '0') {
					uni.$emit('infoUpdate')
					uni.showToast({
						title: '提交成功',
						icon: 'success',
						mask: true
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 500)
				} else {
					uni.showToast({
						title: res.ERROR[0].error,
						icon: 'none',
						mask: true
					})
				}
			} catch (err) {
				uni.showToast({
					title: '提交失败',
					icon: 'error',
					mask: true
				})
			}
		}).catch(err => {
			uni.showToast({
				title: '请完善相关资料后再提交',
				icon: 'none',
				mask: true
			})
		})
	}
</script>

<style scoped lang="scss">
	.CourseDetail {
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/

		.form-group+.form-group {
			border-top: 1upx solid #eee;
		}
	}
</style>
